<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>用户充值</title>
	<link rel="icon" href="favicon.ico" type="image/ico">
	<link href="/static/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="/static/css/style.min.css" rel="stylesheet">
	<script src="/static/js/jquery-3.1.1.min.js"></script>
	<script src="/static/js/Cookie.js"></script>


	<script>

		$(document).ready(function () {
			let currentCookie = Cookie.get("ticker")
			$.ajax({
				url: "user/getUserName",
				type: "post",
				headers:{
					'Content-Type': 'application/json',
					'access-token': currentCookie,
				},
				success: function (data) {
					if(data.code === 200){
						$("#userName").text(data.data);

						$("#msgSet").append("个人信息设置")
						$("#changepwd").append("修改密码");
						$("#outLogin").append("退出登录");
					} else {
						window.location.href = "/"
					}

				},
				error: function (data) {
					alert("网络错误")
				}
			})



			$.ajax({
				url: "user/getAllUserBindingCard",
				type: "post",
				datatype:"json",
				headers:{
					'Content-Type': 'application/json',
					'access-token': currentCookie,
				},
				success: function (res) {
					console.log(res);
					if(res.code === 200){
						$.each(res.data, function (index,user){
							console.log(user)
							let newtr = $("<option>"+user.cardId+"      ("+user.bank+")"+"</option>")
							$("#cardId").append(newtr)
						})
					}
					if(res.code === 400){
						$("#cardId").append("<option>"+"该账户没有绑定银行卡"+"</option>")
					}
				},
				error: function () {
					$("#cardId").append("<option>"+"该账户没有绑定银行卡"+"</option>")
				}
			})
		})
	</script>
	<style>
		.lyear-wrapper {
			position: relative;
			margin-top: -80px;
		}

		.lyear-login {
			display: flex !important;
			min-height: 100vh;
			align-items: center !important;
			justify-content: center !important;
		}

		.lyear-login:after {
			content: '';
			min-height: inherit;
			font-size: 0;
		}

		.login-center {
			background: #fff;
			min-width: 29.25rem;
			padding: 2.14286em 3.57143em;
			border-radius: 3px;
			margin: 2.85714em;
		}

		.login-header {
			margin-bottom: 1.5rem !important;
		}

		.login-center .has-feedback.feedback-left .form-control {
			padding-left: 38px;
			padding-right: 12px;
		}

		.login-center .has-feedback.feedback-left .form-control-feedback {
			left: 0;
			right: auto;
			width: 38px;
			height: 38px;
			line-height: 38px;
			z-index: 4;
			color: #dcdcdc;
		}

		.login-center .has-feedback.feedback-left.row .form-control-feedback {
			left: 15px;
		}
	</style>
</head>

<body>
<div class="lyear-layout-web">
	<div class="lyear-layout-container">
		<!--左侧导航-->
		<aside class="lyear-layout-sidebar">

			<!-- logo -->
			<div id="logo" class="sidebar-header">
				<p></p>
			</div>
			<div class="lyear-layout-sidebar-scroll">

				<nav class="sidebar-main">

					<ul class="nav nav-drawer">
						<li class="nav-item active"> <a href="/toIndex"><i class="mdi mdi-home"></i> 后台首页</a> </li>
						<li class="nav-item nav-item-has-subnav">
							<a href="toBinding" ><i class="mdi mdi-credit-card"></i>绑定银行卡</a>
						</li>
						<li class="nav-item nav-item-has-subnav">
							<a href="toUnbinding"><i class="mdi mdi-credit-card"></i>解绑银行卡</a>
						</li>
						<li class="nav-item nav-item-has-subnav">
							<a href="toRecharge"><i class="mdi mdi-credit-card-plus"></i>充值</a>
						</li>
						<li class="nav-item nav-item-has-subnav">
							<a href="toWithdrawal" ><i class="mdi mdi-credit-card-plus"></i>提现</a>
						</li>
						<li class="nav-item nav-item-has-subnav">
							<a href="toTransferAccounts" ><i class="mdi mdi-credit-card-plus"></i>转账</a>
						</li>
						<li class="nav-item nav-item-has-subnav">
							<a href="toSelectFlow" ><i class="mdi mdi-content-paste"></i>流水查询</a>
						</li>
					</ul>
				</nav>
			</div>

		</aside>
		<!--End 左侧导航-->

		<!--头部信息-->
		<header class="lyear-layout-header">

			<nav class="navbar navbar-default">
				<div class="topbar">

					<div class="topbar-left">
						<div class="lyear-aside-toggler">
							<span class="lyear-toggler-bar"></span>
							<span class="lyear-toggler-bar"></span>
							<span class="lyear-toggler-bar"></span>
						</div>
						<span class="navbar-page-title"> 用户充值 </span>
					</div>

					<ul class="topbar-right">
						<li class="dropdown dropdown-profile">
							<a href="javascript:void(0)" data-toggle="dropdown">
								<span id="userName"></span>
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li> <a href="toProfile" id="msgSet"> <i class="mdi mdi-account"></i> </a> </li>
								<li > <a href="changepwd"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
								<li class="divider"></li>
								<li> <a href="javascript:void(0);" id="outLogin" onclick="outLogin()"><i class="mdi mdi-logout-variant"></i></a> </li>
							</ul>
						</li>
						<!--切换主题配色-->
						<li class="dropdown dropdown-skin">
							<span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
							<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
								<li class="drop-title">
									<p>主题</p>
								</li>
								<li class="drop-skin-li clearfix">
											<span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
									<span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
									<span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
								</li>
								<li class="drop-title">
									<p>LOGO</p>
								</li>
								<li class="drop-skin-li clearfix">
											<span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
									<span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
								</li>
								<li class="drop-title">
									<p>头部</p>
								</li>
								<li class="drop-skin-li clearfix">
											<span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
									<span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
								</li>
								<li class="drop-title">
									<p>侧边栏</p>
								</li>
								<li class="drop-skin-li clearfix">
											<span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
									<span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
								</li>
							</ul>
						</li>
						<!--切换主题配色-->
					</ul>

				</div>
			</nav>

		</header>
		<!--End 头部信息-->

		<!--页面主要内容-->
		<main class="lyear-layout-content">

			<div class="container-fluid">

				<div class="row">
					<div class="col-lg-12">
						<div class="card">
							<div class="card-body">
								<hr>
								<form class="site-form" id="submitForm" >
									<div class="form-group">
										<label for="username">选择银行卡</label>
										<select class="form-control" name="cardId" id="cardId">

										</select><br />
										<a href="/toBinding">绑定新的银行卡</a>
									</div><br /><br /><br /><br />
									<div class="form-group">
										<label >充值金额（元）</label>
										<input type="text" class="form-control" name="amount" id="amount">
									</div>
									<div class="form-group">
										<label >电子账户支付密码</label>
										<input type="password" class="form-control" name="pay_password" id="pay_password">
									</div>
								</form>
								<button class="btn btn-primary" id="submit" onclick="withdrawal()">充值</button>
							</div>
						</div>
					</div>

				</div>

			</div>
		</main>
		<!--End 页面主要内容-->
	</div>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script th:inline="javascript" type="text/javascript">
	function withdrawal(){
		let formData=new FormData(document.getElementById('submitForm'));

		let currentCookie = Cookie.get("ticker")
		let cardId = formData.get("cardId").substr(0,16)
		let amount = formData.get("amount")
		let payPassword = ""
		payPassword = formData.get("pay_password")
		check_withdrawal(amount,payPassword)
		$.ajax({
			url: "user/recharge/"+amount+"/"+cardId+"/"+payPassword,
			type: "post",
			datatype:"json",
			headers:{
				'Content-Type': 'application/json',
				'access-token': currentCookie,
			},
			success: function (res) {
				if(res.code === 200){
					alert(res.message)
					location.reload()
				} else {
					alert(res.message)
				}
			},
			error: function () {
				alert("网络故障")
			}
		})
	}
	//校验提前现金
	function check_Amount(amount){

		if(amount!=="" && amount>0){
			check=true;
		}else {
			check=false;
		}
		return check;
	}

	//	校验支付密码
	function check_Pay_Password(payPassword){
		if(payPassword !=="" && payPassword.length > 4){
			check=true;
		}else {
			check=false;
		}
		return check;
	}

	function check_withdrawal(amount,payPassword){
		let check_1 = check_Amount(amount)
		let check_2 = check_Pay_Password(payPassword);
		if(check_1 === false && check_2 === true){
			alert("充值金额错误，请输入正确格式")
		} else if(check_2 === false && check_1 === true){
			alert("支付密码错误，请输入至少四位密码")
		} else if( check_1 === check_2 && check_2 === false) {
			alert("充值金额和支付密码格式错误，请重新输入")
		}
	}
	function outLogin(){
		let currentCookie = Cookie.get("ticker")
		$.ajax({
			url: "toLogin",
			type: "post",
			datatype:"json",
			headers:{
				'Content-Type': 'application/json',
				'access-token': currentCookie,
			},
			success: function (res) {
				if(res.code === 200) {
					window.location.href = "/"
				}
			},
			error: function () {
				alert("网络故障")
			}
		})
	}

</script>
</body>

</html>
